<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			table {
				margin: 100px auto;
			}

			th {
				background-color: gray;
				width: 100px;
			}

			tr {
				height: 35px;
			}

			td {
				text-align: center;
				height: 50px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<thead>
			<tr>
				<th>姓名</th>
				<th>科目</th>
				<th>成绩</th>
				<th>操作</th>
			</tr></thead>
			<tbody></tbody>
			<!-- 		<tr>
				<td>卫英络</td>
				<td>jjjj</td>
				<td>100</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>卫英络1111</td>
				<td>jjjj1111</td>
				<td>100111</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>卫英络222</td>
				<td>jjjj2222</td>
				<td>100222</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>卫英络333</td>
				<td>jjjj333</td>
				<td>10033</td>
				<td><a href="javascript:;">删除</a></td>
			</tr> -->
		</table>
		<script type="text/javascript">
			var datas = [{
				name: "wtf",
				subject: "JavaScript",
				score: 100
			}, {
				name: "得到",
				subject: "JavaScript",
				score: 56
			}, {
				name: "2212的方式",
				subject: "JavaScript",
				score: 77
			}, {
				name: "杀杀杀",
				subject: "JavaScript",
				score: 22
			}];

			//2.往tbody里面创建行,有几个人(通过数组的长度)我们就创建几行
			var tbody = document.querySelector("tbody");
			for (var i = 0; i < datas.length; i++) {
				//创建tr行
				var tr = document.createElement("tr");
				tbody.appendChild(tr);

				for (var key in datas[i]) {
					//key 是属性名

					//1.创建单元格
					var td = document.createElement("td");
					//2.添加内容
					td.innerHTML = datas[i][key];
					tr.appendChild(td);
				}
				var td = document.createElement("td");
				td.innerHTML = "<a href='javascript:;'>删除</a>";
				tr.appendChild(td);
			}

			//3.给删除按钮添加删除逻辑
			var as = document.querySelectorAll("a");
			for (var i = 0; i < as.length; i++) {
				as[i].onclick = function() {
					tbody.removeChild(this.parentNode.parentNode);
				}
			}

			//for(var k in obj){
			// 	k得到属性名
			// 	obj[k]得到属性值
			// }
		</script>
	</body>
</html>
